div[name=component]{
	position:absolute;
	top:200px;
	height:330px;
}

.closeButton{
	color: lightBlue;
	position: absolute;
	right: 15px;
	top: 15px;
	-webkit-transform: rotate(45deg);
	font-weight: bold;
	cursor: pointer;
	font-size: 20px;
}
.closeButton:hover{
	color:black;
}

div[name=content]{
width:400px;
-webkit-box-shadow:20px 20px 20px gray;
height:200px;
background-color:white;
border:1px solid gray;
border-radius:20px;

}

div[name=tip]{
width:1px;
border-left:50px solid white;
border-right:50px solid transparent;
border-top:50px solid transparent;
border-bottom:50px solid white;
-webkit-transform:rotate(-10deg) skew(120deg, -48deg);
/*rotate(-12deg) skew(122deg, -48deg)*/
-webkit-box-shadow:-9px 3px 5px gray;
top:-52px;
left:150px;
position:relative;

}

div[name=componentContainer]{
	width: 328px; height: 400px; position: absolute; right: 2%;top:100px;overflow:hidden;
}

div[name=category]{
	margin-top:60px;
	position:relative;
}

div[name=addDiv]{
	display: none; position: absolute; opacity: 1; 
}

div[name=removeDiv]{
	display: none; position: absolute; opacity: 1;
}

div[name=counter]{
	background-color:black; position: absolute; right: 0px; top: 0px; margin: 6px 5px; font-size: 12px; color: white; 
	padding: 3px 4px; border-radius: 4px; font-weight: bold;  text-align:center;line-height:14px;min-width:14px;
}

.pressed{
	 border:1px solid black;
	width:100px;
	height:20px;
	border-radius:2px;
	background-color: #5872A7;
	-webkit-box-shadow: inset 0px 1px 5px #000;
	padding:5px 10px;
text-align:center;
	cursor:pointer;
	color:#ffeffe;
}
.unpressed{
	border:1px solid black;
	width:100px;
	height:20px;
	border-radius:2px;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6079AB), to(#5872A7));
	-webkit-box-shadow:2px 2px 5px #000, inset 0px 1px 1px #8A9CC2;
	text-align:center;
	padding:5px 10px;
	cursor:pointer;
	color:white;
}
@-webkit-keyframes rotateClock{
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform:rotate(90deg);}
}

.rotateClock{
	-webkit-animation: rotateClock 0.5s;
}

@-webkit-keyframes rotateAntiClock{
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform:rotate(-90deg);}
}

.rotateAntiClock{
	-webkit-animation: rotateAntiClock 0.5s;
}
/*
@-webkit-keyframes collapse{
	from {left: 0px;}
	to {left:309x;}
}

.componentCollapse{
	-webkit-animation: collapse 0.5s;
	left:309px;
}
*/

@-webkit-keyframes collapse{
	0% {
			left: 0px;
		}
		80% {
			left:350px;
		}
		100% {
			left:309px;
		}

}
.componentCollapse{
	-webkit-animation: collapse 0.5s;
	left:309px;
}
@-webkit-keyframes expand{
	0% {
			left: 309px;
		}
		80% {
			left:-41px;
		}
		100% {
			left:0px;
		}

}
.componentExpand{
	-webkit-animation: expand 0.5s;
	left:0px;
}


@-webkit-keyframes collapseToLeft{
	0% {
			width: 309px;
		}
		100% {
			width:0px;
		}
}
.collapseToLeft{
	-webkit-animation: collapseToLeft 0.5s;
	left:309px;
}

@-webkit-keyframes expandToRight{
	0% {
			width: 0px;
		}
		100% {
			width:309px;
		}
}
.expandToRight{
	-webkit-animation: expandToRight 0.5s;
}

div[name=widgetFooter]{
	position: relative;
	margin:0 auto;
}
.footertab{
	float:left;
	border-left:1px solid black;
	border-top:1px solid black;
	border-bottom:1px solid black;
	height:20px;
	width:100px;
	background-color:blue;
	text-align:center;
	padding:10px;
	color:white;
}
.footertab:hover{
	opacity:0.5;
	cursor:pointer;
}
.footertabselected{
	-webkit-box-shadow: inset 2px 2px 5px #000;
}
.footertab:first-child{
	border-radius:20px 0px 0px 20px;
}
.footertab:last-child{
	border-right:1px solid black;
	border-radius:0px 20px 20px 0px;
}
.leftHandPanel{
	position:absolute;left:0px;width:0px;height:230px;border:1px solid black;overflow:hidden;
}